<template>
  <div class="ceshi" ref="ceshi">
    <p>萨克回到家啊还贷款</p>
    <h1>阿萨德记录卡进度款</h1>
    <h2>
      <span style="text-decoration: underline;color:red">阿萨德考拉圣诞节快乐</span
      ><i style="text-decoration: line-through;color: blue">sad啦数控刀具</i>
    </h2>
    <button id="pasteButton" @click="ceshi">测试</button>
  </div>
</template>

<script>
import value from '../../../public/files/a.json'
console.log(value ,'value');
export default {
  methods: {
    ceshi() {
      let html = this.$refs.ceshi.innerHTML;
      let text = this.$refs.ceshi.innerText;
      let blob = new Blob([html], { type: "text/html" });
      let blob1 = new Blob([text], { type: "text/plain" });
      const data = [
        new ClipboardItem({ "text/html": blob, "text/plain": blob1 }),
      ];
      navigator.clipboard
        .write(data)
        .then(() => {
          this.isCopy = false;
          console.log("Image copied to clipboard!");
        })
        .catch(function (err) {
          console.error("Failed to copy image: ", err);
        });
    },
  },
  mounted() {
    async function readClipboardHTML() {
      try {
        // 请求剪贴板权限并读取内容
        const clipboardItems = await navigator.clipboard.read();

        for (const item of clipboardItems) {
          // 检查是否有 text/html 类型的内容
          if (item.types.includes("text/html")) {
            const htmlBlob = await item.getType("text/html");
            const html = await htmlBlob.text();
            console.log("剪贴板中的 HTML:", html);
            return html;
          }
        }
        console.log("剪贴板中没有 HTML 内容");
      } catch (error) {
        console.error("读取剪贴板失败:", error);
      }
    }

    // 示例：在按钮点击时触发
    // document
    // .getElementById("pasteButton")
    // .addEventListener("click", readClipboardHTML);
  },
};
</script>
<style scoped lang="scss"></style>
